import React from "react";
import {BaseProps} from "../../../App";
import {ComponentModel} from "../../model/ComponentModel";
import MaterialTable, {Column} from "material-table";
import {ComponentApi} from "../../../framework/api/ComponentApi";
import "./Component.css";
import {PlayArrowRounded} from "@material-ui/icons";
import Typography from "@material-ui/core/Typography";

export interface ComponentsState {
    create: boolean;
    components: Array<ComponentModel>;
    keyword: string
}

export interface ComponentDetailPanelProps extends BaseProps {
    component: ComponentModel
}

export class ComponentDetailPanel extends React.Component<ComponentDetailPanelProps, any> {
    constructor(props: ComponentDetailPanelProps) {
        super(props);
    }

    render(): React.ReactElement | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return <div className='main-content component-detail-panel'>
            <div>
                <Typography>名称：{this.props.component.info?.name}</Typography>
            </div>
            <div>
                <Typography>版本号：{this.props.component.info?.version}</Typography>
            </div>
            <div>
                <Typography>状态：{this.props.component.info?.status}</Typography>
            </div>
            <div>
                <Typography>实例ID：{this.props.component.info?.instanceId}</Typography>
            </div>
            <div>
                <Typography>镜像ID：{this.props.component.info?.imageId}</Typography>
            </div>
            <div>
                <Typography>健康状态：{this.props.component.info?.health}</Typography>
            </div>
        </div>;
    }
}

export class Components extends React.Component<BaseProps, ComponentsState> {

    columns: Column<ComponentModel>[] = [{
        field: "name",
        title: "名称"
    }, {
        field: "type",
        title: "类型"
    }];

    constructor(props: BaseProps) {
        super(props);
        this.createItem = this.createItem.bind(this);
        this.search = this.search.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
        this.updateItem = this.updateItem.bind(this);
        this.search = this.search.bind(this);
        this.startComponent = this.startComponent.bind(this);
        this.state = {
            create: false,
            components: [],
            keyword: ''
        }
    }

    componentDidMount(): void {
        this.search("");
    }

    render(): React.ReactElement | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return <div>
            <MaterialTable title={'组件列表'} columns={this.columns} data={this.state.components}
                           editable={{
                               onRowAdd: this.createItem,
                               onRowUpdate: this.updateItem,
                               onRowDelete: this.deleteItem
                           }}
                           onSearchChange={this.search}
                           detailPanel={rowData => {
                               return <ComponentDetailPanel component={rowData}/>
                           }}
                           options={{
                               pageSizeOptions: [10, 50],
                               pageSize: 10,
                               searchFieldAlignment: 'left',
                               showTitle: false,
                               toolbarButtonAlignment: 'left',
                               search: true,
                               actionsColumnIndex: 5,
                               detailPanelColumnAlignment: 'right'
                           }}
                           actions={[
                               {
                                   icon: () => <PlayArrowRounded/>,
                                   tooltip: '启动组件',
                                   onClick: this.startComponent
                               }
                           ]}
            >
            </MaterialTable>
        </div>;
    }

    search(searchText: string) {
        ComponentApi.page(this.props.match.params.projectId, {keyword: searchText}).then(items => {
            this.setState({components: items.data, keyword: searchText})
        });
    }

    startComponent(event: any, data: ComponentModel | ComponentModel[]): void {
        if (data instanceof Array) {
            console.log('array')
            console.log(data)
        }
        console.log(data)
    }


    private createItem(item: ComponentModel): Promise<ComponentModel> {
        let promise = ComponentApi.create(this.props.match.params.projectId, item);
        promise.finally(() => this.search(this.state.keyword));
        return promise;
    }

    private updateItem(newData: ComponentModel, oldData?: ComponentModel): Promise<ComponentModel> {
        let promise = ComponentApi.update(this.props.match.params.projectId, newData);
        promise.finally(() => this.search(this.state.keyword));
        return promise;
    }

    private deleteItem(item: ComponentModel): Promise<ComponentModel> {
        return ComponentApi.delete(this.props.match.params.projectId, item);

    }
}